<template>
	<div class="headerBox">
		<header>
			<h1>华吉辰网络货运平台监测</h1>
			<dateContainer></dateContainer>
			<div class="statistics">
				<div class="img"><img src="../assets/images/货车.png" alt="" /></div>
				<div class="text">
					大宗运输进度
					<div class="Estatistics">
						<em> Total statistics </em>
					</div>
				</div>
			</div>
		</header>
	</div>
</template>

<script>
	import { dateContainer } from './index';
	export default {
		name: '',
		components: { dateContainer },
		props: ['list'],
		data() {
			return {};
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		activated() {},
		methods: {},
	};
</script>
<style scoped>
	.headerBox {
		header {
			padding-top: 0.1875rem;
			padding-bottom: 0.125rem;
			width: 100%;
			height: auto;

			h1 {
				font-size: 0.425rem;
				font-weight: 500;
				letter-spacing: 0.25rem;
				text-align: center;
			}
			.statistics {
				width: 20%;
				height: 0.625rem;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: center;
				.img {
					height: 100%;
					margin-left: 0.25rem;
					img {
						height: 100%;
						display: inline-block;
						margin-right: 0.0875rem;
					}
				}
				.text {
					width: 80%;
					font-size: 0.3rem;
					line-height: 0.4375rem;
					display: flex;
					justify-content: space-between;
					margin-right: 0.1563rem;
					border-bottom: 1px solid #fff;
				}
				.Estatistics {
					height: 100%;
					em {
						font-size: 0.175rem;
					}
				}
			}
		}
	}
</style>
